<template>
	<view class="" :style="[AppSkinVar]">
		<e-loading-page :loading="loading"   >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		
		<view class="e-p-20" v-if="info">
			<view class="e-p-b-40">
				<view class="c-333 e-font-40 fw-600 e-p-t-34 e-p-l-30">
					{{$t(getReceivingStatusText(info.state))}}
				</view>
			</view>
			<view class="e-radius-20 bg-white e-p-20 e-p-b-20" v-if="info.params.order && info.params.order.receivingType === 1">
				<view class="e-p-b-10 e-font-28 c-333 fw-600">
					<text>{{$t('order.收货地址')}}</text>
					<text>：</text>
					<text>{{info.params.order.receivingAddress}}</text>
				</view>
				<view class="e-flex">
					<text>{{$t('order.收货人')}}</text>
					<text>：</text>
					<text>{{info.params.order.receivingName}}</text>
					
					<view class="phone e-p-l-20">
						{{info.params.order.receivingPhone||""}}
					</view>
				</view>
				
			</view>
			<view class="bg-white border-raidus20 e-p-20 e-p-b-20" v-if="info.params.order && info.params.order.receivingType === 2">
				<view class="e-flex fw-600 e-font-28 c-333 e-p-b-16">
					<text class="e-p-r-20">{{$t('order.自提人')}}: </text>
					<text class="e-p-r-40">{{info.params.order.receivingName}}</text>
					<text>{{info.params.order.receivingPhone}}</text>
				</view>
				<view class="c-secondary e-font-24">
					<text>{{$t('order.收货地址')}}</text>
					<text>：</text>
					<text>{{info.params.order.receivingAddress}}</text>
				</view>
			</view>
			<view class="h-100 e-p-20 bg-white e-flex justify-between e-p-b-20 border-raidus20" v-if="info.params.order && info.params.order.receivingType === 2 && info.params.order.receivingTime">
				<text>{{$t('nearby.自提时间')}}</text>
				<text class="fw-600">{{info.params.order.receivingTime}}</text>
			</view>
			<view class="h-100 e-flex bg-white e-p-b-20 e-p-20" v-if="info.params.order && info.params.order.orderMold === 2">
				<view class="e-flex-1 c-333 fw-600">
					<text v-if="info.params.order.orderGroupNowNum === info.params.order.orderGroupNum">{{$t('order.拼团已完成')}}，</text>
					<text v-else>{{$t('order.拼团未完成')}}，</text>
					<text>{{$t('cart.共')}}{{info.params.order.orderGroupNowNum}}{{$t('user.人')}}</text>
				</view>
				<view class="e-flex e-rela">
					<image class="img-48 spell-group-people" v-for="(img, index) in info.params.order.orderGroupUserPhotos" :src="img ? $fullLink(img) : $staticPath('default-headerImg.png')" mode="" :style="{right: index ? index * 24 + 'px' : '10px', 'z-index': 999 - index}"></image>
				</view>
			</view>
			<view class="e-radius-20 bg-white e-p-b-20">
				<view class="e-flex e-p-20">
					<view class="e-flex-1 e-flex">
						<load-image mode="aspectFit" :size="['48rpx']"  :src="info.userPhoto" v-if="info.userPhoto">
						</load-image>
						<app-image mode="aspectFit" :size="['48rpx']" src="default-headerImg.png" v-else />
						<text class="e-font-28 c-333 fw-600 e-p-l-12">{{info.userNickName}}</text>
					</view>
				</view>
			<view class="" v-if="info.params.order">
				<view class="e-p-20 e-flex " v-for="item in info.params.order.deputys">
					<load-image mode="aspectFit" :size="['200rpx']"  :src="item.commodityUrl" >
					</load-image>
					<view class="e-p-l-20 e-flex-1">
						<view class="e-flex e-p-b-10">
							<view class="e-flex-1 e-p-r-18 e-line-2 c-333 e-font-28">
								{{item.commodityName}}
							</view>
							<view class="c-333 ">
								<text class="e-font-20">{{$unitEn}}</text>
								<text class="e-font-28 fw-600">{{item.deputyMoney}}</text>
							</view>
						</view>
						<view class="e-flex e-p-b-34 e-font-26" style="color: #808080;">
							<view class="e-flex-1">
								{{item.commoditySpecName}}
							</view>
							<view class="">
								x{{item.commodityCount}}
							</view>
						</view>
						<view class="e-font-26" style="color: #808080;">
							SKU:{{item.commoditySpecId}}
						</view>
					</view>
				</view>
			</view>
				<view class="bg-white e-p-20" v-if="info.params.order">
					<view class="e-flex e-flex-between c-333 e-p-b-20">
						<text>{{ $t('order.运费') }}</text>
						<text>+{{$unitEn}}{{info.params.order.orderFreight}}</text>
					</view>
					<view class="e-flex e-flex-between c-333 e-p-b-20" v-if="info.params.order.orderMoneyCoupon">
						<text>{{ $t('order.店铺优惠') }}</text>
						<text>-{{$unitEn}}{{info.params.order.orderMoneyCoupon}}</text>
					</view>
					<view class="e-flex e-flex-between c-333 e-p-b-20" v-if="info.params.order.orderMoneyCouponSys">
						<text>{{ $t('order.平台优惠') }}</text>
						<text>{{$unitEn}}{{info.params.order.orderMoneyCouponSys}}</text>
					</view>
					<view class="e-flex e-flex-between c-333 e-p-b-20" v-if="info.params.order.orderMoneyDeduction">
						<text>{{ $t('order.抵扣') }}</text>
						<text>{{$unitEn}}{{info.params.order.orderMoneyDeduction}}</text>
					</view>
					<view class="e-flex e-flex-between c-333 fw-600" v-if="info.params.order.receivingStatus !== 5">
						<text>{{ $t('order.实付金额') }}</text>
						<text>{{$unitEn}}{{info.params.order.orderMoneyPay}}</text>
					</view>
					<view class="e-flex e-flex-between c-333 fw-600" v-else>
						<text>{{ $t('order.amountPayable') }}</text>
						<text>{{$unitEn}}{{info.params.order.orderMoneyPay}}</text>
					</view>
					<view class="e-flex e-flex-between c-333 e-p-b-20 e-p-t-20" v-if="info.money">
						<text>{{ $t('order.佣金') }}</text>
						<view class="e-flex">
							<text class="c-red">{{$unitEn}}{{info.money}}</text>
							<view class="e-p-l-10 status-box">
								{{ $t(getReceivingStatusText(info.state))}}
							</view>
						</view>
						
					</view>	
				</view>
			</view>
			<view class="bg-white e-p-20 e-radius-20 e-p-b-20">
				<view class="e-p-t-10 e-p-b-30 c-333 e-font-28 fw-600">
					{{$t('order.下单用户信息')}}
				</view>
				
				<view class="e-p-b-20 e-flex e-flex-between">
					<text>{{ $t('order.昵称') }}</text>
					<text>{{info.userNickName ||''}}</text>
				</view>
				
				<view class="e-p-b-20 e-flex e-flex-between">
					<text>{{ $t('order.账号') }}</text>
					<text>{{info.userName ||''}}</text>
				</view>
				
				<view class="e-p-b-20 e-flex e-flex-between">
					<text>{{ $t('order.等级') }}</text>
					<text>{{info.userLevelName ||''}}</text>
				</view>
			</view>
			
			<view class="bg-white e-p-20 e-radius-20 e-p-b-20">
				<view class="e-p-t-10 e-p-b-30 c-333 e-font-28 fw-600">
					{{$t('order.推广人信息')}}
				</view>
				
				<view class="e-p-b-20 e-flex e-flex-between">
					<text>{{ $t('order.昵称') }}</text>
					<text>{{info.targetNickName  ||''}}</text>
				</view>
				
				<view class="e-p-b-20 e-flex e-flex-between" v-if="info.targetUserName">
					<text>{{ $t('order.账号') }}</text>
					<text>{{info.targetUserName  ||''}}</text>
				</view>
				
				<view class="e-p-b-20 e-flex e-flex-between" v-if="info.targetLevelName">
					<text>{{ $t('order.等级') }}</text>
					<text>{{info.targetLevelName  ||''}}</text>
				</view>
			</view>
			
			
			<view class="bg-white e-p-20 e-radius-20" v-if="info.params.order">
				<view class="e-p-t-10 e-p-b-30 c-333 e-font-28 fw-600">
					{{$t('order.订单信息')}}
				</view>
				<view class="e-p-b-20 e-flex e-flex-between" v-if="info.params.order.orderRemarks">
					<text>{{ $t('order.订单备注') }}</text>
					<text>{{info.params.order.orderRemarks||''}}</text>
				</view>
				<view class="e-p-b-20  e-flex e-flex-between" @tap="$copy(info.params.order.orderId)">
					<text>{{ $t('order.订单编号') }}</text>
					<view class="e-flex">
						<text>{{info.params.order.orderId}}</text>
						<image :src="$staticPath('order/copy.png')" class="img-32 e-p-l-20"></image>
					</view>
				</view>
				<view class="e-p-b-20 e-flex e-flex-between" v-if=" info.params.order.payId">
					<text>{{ $t('order.支付流水号') }}</text>
					<text>{{info.params.order.payId}}</text>
				</view>
				<view class="e-p-b-20 e-flex e-flex-between" v-if="info.params.order.createTime">
					<text>{{ $t('order.下单时间') }}</text>
					<text>{{info.params.order.createTime}}</text>
				</view>
				<view class="e-p-b-20 e-flex e-flex-between" v-if="info.params.order.payTime">
					<text>{{ $t('order.付款时间') }}</text>
					<text>{{info.params.order.payTime}}</text>
				</view>
				<view v-if="info.params.order.deliverTime" class="e-p-b-20 e-flex e-flex-between">
					<text>{{ $t('order.发货时间') }}</text>
					<text>{{info.params.order.deliverTime}}</text>
				</view>
				<view v-if="info.params.order.receivingTime" class="e-p-b-20 e-flex e-flex-between">
					<text>{{ $t('order.完成时间') }}</text>
					<text>{{info.params.order.receivingTime}}</text>
				</view>
				<view class="e-p-b-20 e-flex e-flex-between" v-if="info.params.order.orderPayName">
					<text>{{ $t('nearby.支付方式') }}</text>
					<text>{{ info.params.order.orderPayName }}</text>
				</view>
				<view class="e-flex" v-if="info.params.order.orderPayType === 'OFFLINE'">
					<text>{{ $t('nearby.支付凭证') }}</text>
					<view class="order-info-btn c-secondary e-font-20" @tap="previewOfflineInfo">
						{{ $t('nearby.查看凭证') }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import { getTeamRewardDetail } from '@/common/request/api'
	import type { TeamOrderInfo } from '@/common/request/api'
	
	const props = defineProps({
		id:{
			type:String,
			required:true
		}
	})
			
	const info = ref<TeamOrderInfo|undefined>(undefined)
	const loading = ref(true)
	
	const statusTextList = [
		{
			dictValue:0,
			dictLabel:'order.待分佣'
		},
		{
			dictValue:1,
			dictLabel:'order.已分佣'
		},
		{
			dictValue:2,
			dictLabel:'order.已取消'
		},
	]
	
	const getReceivingStatusText = (status:number) => {
		let text = ''
		statusTextList?.some(item => {
			if (item.dictValue == status) {
				text = item.dictLabel
				return true
			}
		})
		return text
	}
	
	getTeamRewardDetail(props.id).then(res => {
		info.value = res.data
	}).finally(() => loading.value = false)
</script>

<style lang="scss" scoped>
	.img-200 {
		width: 200rpx;
		height: 200rpx;
	}
	.status-box {
		background: #999999;
		e-radius: 18rpx 18rpx 18rpx 0px;
		padding: 2rpx 8rpx 2rpx 10rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		color: #fff;
	}
	.spell-group-people {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
	}
</style>